<template>
  <div class="user">
    <div class="search">
      <wxform
        v-bind="searchFormConfig"
        v-model="formData"
        @updatemodelValue="updatemodelValue"
        @queryBtnClick="queryBtnClick"
        @handleResetClick="handleResetClick"
        ref="formContentRef"
      >
      </wxform>
    </div>
    <page-content
      :contenTableConfig="contenTableConfig"
      @SelectionChange="SelectionChange"
      @handleNewClick="handleNewClick"
      @handleEditClick="handleEditClick"
      pageName="users"
      ref="pageContentRef"
    >
    </page-content>
    <page-modal
      :modalConfig="modalConfigRef"
      :defualtInfo="defualtInfo"
      ref="pageModalRef"
      pageName="users"
    ></page-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { useStore } from 'vuex'
import wxform from '../../../../base-ui/form/index'
import pageContent from '../../../../components/page-content/index'
import pageModal from '../../../../components/page-modal/index'
import { searchFormConfig } from './config/searchconfig'
import { contenTableConfig } from './config/content.config'
import { usePageSearch } from '../../../../hooks/usePageSearch'
import { usePageModal } from '../../../../hooks/usePageModal'
import { modalConfig } from './config/modal.config'
export default defineComponent({
  name: 'user',
  components: {
    wxform,
    pageContent,
    pageModal
  },
  setup() {
    const store = useStore()
    const formItems = searchFormConfig?.formItems ?? []

    const formOriginData = {}

    for (const item of formItems) {
      formOriginData[item.field] = ''
    }
    const formData = ref(formOriginData)
    const updatemodelValue = (newValue) => {
      formData.value = newValue
    }
    const SelectionChange = (value) => {
      console.log(value)
    }
    const handleRefresh = () => {
      console.log('刷新')
    }
    const newCallBack = () => {
      const passwordItem = modalConfig.formItems.find(
        (item) => item.field === 'password'
      )
      // 新建显示密码框
      passwordItem!.isHidden = false
    }
    const editCallBack = () => {
      const passwordItem = modalConfig.formItems.find(
        (item) => item.field === 'password'
      )
      // 编辑隐藏密码框
      passwordItem!.isHidden = true
    }
    // 动态添加部门和角色列表
    const modalConfigRef = computed(() => {
      const departmentItem = modalConfig.formItems.find(
        (item) => item.field === 'departmentId'
      )
      departmentItem!.options = store.state.entireDepartment.map((item) => {
        return { title: item.name, value: item.id }
      })
      const roleItem = modalConfig.formItems.find(
        (item) => item.field === 'roleId'
      )
      roleItem!.options = store.state.entireRole.map((item) => {
        return { title: item.name, value: item.id }
      })
      return modalConfig
    })
    // 搜索和重置
    const [pageContentRef, queryBtnClick, formContentRef, handleResetClick] =
      usePageSearch()
    // 新建和编辑
    const [pageModalRef, defualtInfo, handleNewClick, handleEditClick] =
      usePageModal(newCallBack, editCallBack)
    return {
      // ref
      pageContentRef,
      formContentRef,
      pageModalRef,
      // 配置
      searchFormConfig,
      formData,
      updatemodelValue,
      contenTableConfig,
      modalConfig,
      modalConfigRef,
      // 事件函数
      SelectionChange,
      handleRefresh,
      queryBtnClick,
      handleResetClick,
      handleNewClick,
      handleEditClick,
      // 初始化值
      defualtInfo
    }
  }
})
</script>
<style scoped></style>
